<template>
  <div class="app-container">
    <el-card class="box-card">
      <el-form :model="searchInfo" :inline="true" size="small">
        <el-form-item label="上报时间">
          <el-date-picker
            v-model="timeValue"
            style="width: 300px;"
            clearable
            size="small"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            align="right"
          />
        </el-form-item>
        <el-form-item label="事件分类">
          <el-select v-model="searchInfo.eventNo" clearable placeholder="请选择">
            <el-option v-for="item in eventClassify" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="流转状态">
          <el-select v-model="searchInfo.status" clearable placeholder="请选择">
            <el-option v-for="item in circulationStatusList" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="上报人">
          <el-input v-model="searchInfo.reportBy" placeholder="请输入上报人姓名" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="small" @click="onSearch">搜索</el-button>
          <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- <div class="button" style="margin-bottom: 10px;">
        <el-button type="warning" size="small">取消关注</el-button>
      </div> -->
      <el-table v-loading="loading" :data="ticketList" stripe @selection-change="handleSelectionChange">
        <!-- <el-table-column type="selection" width="55" /> -->
        <el-table-column label="不安全事件分类" prop="eventName" align="center" :show-overflow-tooltip="true" />
        <el-table-column label="上报人" :show-overflow-tooltip="true" prop="createByName" align="center" width="120" />
        <el-table-column label="上报日期" align="center" prop="createTime" width="180" />
        <el-table-column label="流转状态" prop="statusName" :show-overflow-tooltip="true" width="150" align="center" />
        <el-table-column label="用时" prop="exhaustTime" :show-overflow-tooltip="true" width="120" align="center" />

        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="250">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-document" @click="onLook(scope.row)">查看</el-button>
            <el-button size="mini" style="color: #ffba00" type="text" @click="handlUnfollow(scope.row)">取消关注</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="pageInfo.total > 0" :total="pageInfo.total" :page.sync="pageInfo.currentPage" :limit.sync="pageInfo.pageSize" @pagination="onPagination" />
    </el-card>
    <DetailDialog ref="detailRef" />
  </div>
</template>

<script>
import { getMyConcern, doCleanMarkCare } from '@/api/newBaqsj/newBaqsj'
import { eventClassify, circulationStatusList } from '../common'
import DetailDialog from '../components/detail'
export default {
  name: 'MyConcern',
  components: {
    DetailDialog
  },
  data() {
    return {
      eventClassify,
      searchInfo: {
        eventNo: '',
        reportBy: null,
        status: null,
        startOpenTime: null,
        endOpenTime: null
      },
      searchInfoCopy: null,
      pageInfo: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      circulationStatusList,
      timeValue: [],
      loading: false,
      ticketList: [],
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      }
    }
  },
  watch: {
    timeValue: {
      handler(newVal) {
        this.searchInfo.startOpenTime = newVal ? newVal[0] : null
        this.searchInfo.endOpenTime = newVal ? newVal[1] : null
      },
      deep: true
    }
  },
  created() {
    this.searchInfoCopy = JSON.parse(JSON.stringify(this.searchInfo))
    this.getList()
  },
  methods: {
    // 查看详情
    onLook(row) {
      // this.$refs.detailRef.open(row)
      this.$router.push({ path: '/newBaqsj/lookDetail', query: { id: row.id }})
    },
    handlUnfollow(row) {
      doCleanMarkCare({ id: row.id }).then(res => {
        this.$message.success('取消关注成功!')
        this.onSearch()
      })
    },
    onSearch() {
      this.pageInfo.currentPage = 1
      this.getList()
    },
    resetQuery() {
      this.timeValue = []
      this.searchInfo = JSON.parse(JSON.stringify(this.searchInfoCopy))
      this.getList()
    },
    onPagination(obj) {
      this.pageInfo.currentPage = obj.page
      this.pageInfo.pageSize = obj.limit
      this.getList()
    },
    getList() {
      const params = {
        ...this.searchInfo,
        ...this.pageInfo
      }
      getMyConcern(params).then(res => {
        const data = res.records
        data.forEach(item => {
          const circulationStatus = this.circulationStatusList.find(it => it.value === item.status)
          item.statusName = circulationStatus ? circulationStatus.label : ''
        })
        this.ticketList = data
        this.pageInfo.total = res.total
      })
    }
  }
}
</script>

<style scoped></style>
